<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul class="father">
        <li class="son">儿子
            <p class="sun"></p>
        </li>
        <li>hh</li>
        <li>ll</li>
        <li>jj</li>
    </ul>
    <script>
        // 方法带括号
        $(function() {
            // 父
            $(".son").parent();

            // 子
            $(".father").children("p"); //最近的一级 亲儿子
            $(".father").find("p"); //后代选择器

            // 兄 除了自身元素的所有亲兄弟
            $(".father .son").siblings("li").css("color", "red");
            // nextAll()查找当前元素之后的兄弟元素
            // prevAll()查找当前元素之前的兄弟元素

            // 选择器方式选择 第n个选择器
            $("ul li ").eq(2).css("color", "blue");


        })
    </script>

</body>

</html>